<template>
	<view class="container">
		<image src="/static/img/color.png" mode="" class="pageurl" v-if="type == 1"></image>
		<view class="center">
			<image :src="code" mode="" class="qrcode"></image>
			<!-- #ifdef APP-PLUS -->
			<view class="buttom" v-if="bottom == 1">
				<!-- #ifndef H5 -->
				<view class="btn-left1" @click="copy(num)" style="font-size: 34upx;">复制邀请码</view>
				<view class="btn-left" @click="saver(qrcode)">保存图片</view>
				<!-- #endif -->
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="buttom1" v-if="bottom == 1">
				<view class="copy" @click="copy(num)" style="font-size: 34upx;">复制邀请码</view>
				<view class="text">长按图片可保存</view>
			</view>
			<!-- #endif -->
		</view>
	</view>
	</view>
</template>

<script>
	import service from '@/store/service.js';
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
	export default {
		data() {
			return {
				type: 1,
				qrcode: '',
				code: '',
				logo: '',
				saveurl: '',
				share_bg: "",
				bottom: 1,
				num: ''
			};
		},
		onShow: function() {
			var self = this;
			self.$http.post(service.api.user.code).then(function(res) {
				if (res.code == 1) {
					self.code = res.data.code[0];
					self.num = res.data.icode;
				} else {
					self.$api.msg(res.msg);
				}
			});
		},
		methods: {
			copy(num) {
				let self = this;
				self.codeNum = num;
				// console.log(self.codeNum);
				uniCopy({
					content: self.codeNum,
					success: res => {
						uni.showToast({
							title: res,
							icon: 'none'
						});
					},
					error: e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000
						});
					}
				});
			},
			//保存海报
			saver(qrcode) {
				//#ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.code,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '海报保存成功，请前往手机相册查看！'
						});
					}
				});
				//#endif
			},
		}
	}
</script>

<style>
	.copy {
		width: 268upx;
		height: 82upx;
		line-height: 82upx;
		text-align: center;
		background-color: #ffffff;
		color: #dc2430;
		border-radius: 41upx;
		/* margin-top: 50upx; */
		/* margin-left: 50upx; */
	}

	.pageurl {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 50;
	}

	.center {
		position: fixed;
		z-index: 100;
		bottom: -40upx
	}

	.center-img {
		width: 100%;
		height: 1000upx;
		position: absolute;
		z-index: 200;
		box-shadow: 0 0 40upx #FFFFFF;
	}

	.logo,
	.logo1 {
		width: 100upx;
		height: 100upx;
		position: absolute;
		z-index: 300;
		margin: 200upx calc(50% - 50upx) 0;
	}

	.logo1 {
		margin-top: 60upx;
	}

	.qrcode,
	.qrcode1 {
		width: 750upx;
		height: 1300upx;
		z-index: 300;
	}

	.code {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 47upx;
		font-weight: bold;
		color: #fff;
		margin-top: 40upx;
	}

	.buttom,
	.buttom1 {
		width: 100%;
		z-index: 300;
		bottom: 50upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		margin-top: 50upx;
		font-size: 28upx;
		font-weight: bold;
	}

	.buttom1 {
		bottom: 150upx;

	}

	.btn-left,
	.btn-left1,
	.btn-right {
		width: 48%;
		margin: 0 auto;
		height: 82upx;
		text-align: center;
		line-height: 82upx;
		border-radius: 40upx;
	}

	.btn-left {
		color: #DC2430;
		background: #fff;
		font-size: 34upx;
		font-weight: 500;
	}

	.btn-left1 {
		color: #DC2430;
		background: #fff;
		font-size: 34upx;
		font-weight: 500;
		margin-bottom: 20upx;
	}

	.btn-right {
		color: #555555;
		background: #FFFFFF;
	}

	.text {
		margin-top: 30upx;
		font-size: 24upx;
		color: #fff;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
